<template>
	<view>
		<!-- <uni-nav-bar fixed status-bar="true" :border="false" title="商品"></uni-nav-bar> -->
		<view class="ulist">
			<view class="item" v-for="(item,index) in productList" :key="index">
				<view class="item_t">
					<view class="imgs">
						<image lazy-load :src="item.img[0]" mode="aspectFill"></image>
						<view class="abs" v-if="false">
							<view class="">
								<image src="/static/sk.png" mode=""></image>
								<view class="ts">
									已售罄
								</view>
							</view>
							<view class="">
								<image src="/static/xj.png" mode=""></image>
								<view class="ts">
									已下架
								</view>
							</view>
						</view>
					</view>
					<view class="item_r">
						<view class="item_r_1">
							<view class="t1">{{item.productName}}</view>
							<view class="t2" @click="openKucun(item)">
								<view class="">
									库存：<span>{{item.count}}</span>
								</view>
								<uni-icons style="margin-left: 8rpx;" color="#979797" size="14"
									type="right"></uni-icons>
							</view>
						</view>
						<view class="time">
							当日{{item.takeTimeBegin.substring(0,5)}}-{{item.takeTimeEnd.substring(0,5)}}
						</view>
						<view class="price">
							售价：
							<span class="s1"><text>￥</text>{{item.price}}</span>
							<span class="s2">￥{{item.priceOldBegin}}-{{item.priceOldEnd}}</span>
						</view>
					</view>
				</view>
				<view class="item_b">
					<view class="flex_b">
						<switch color="#0CAD61" style="transform:scale(0.7)" :checked="item.status == 'UP'"
							@change="switchchange($event,item)" />
						<span :style="{color:item.status == 'UP'?'':'#D1D1D6'}">
							{{item.status == 'UP'?'上架':'下架'}}
						</span>
					</view>
					<view class="">
						<image @click="pageShop(item)" src="/static/xg.png" mode=""></image>
						<image @click="removeShop(item)" src="/static/sc.png" mode=""></image>
					</view>
				</view>

			</view>
		</view>
		<view class="kong" v-if="nolist">
			<image src="/static/kong.png" mode=""></image>
			<view class="ts">
				暂无上架商品
			</view>
		</view>
		<view class="icon_fixed" @click="pageShopadd()">
			<uni-icons size="50" type="plus-filled"></uni-icons>
		</view>

		<uni-popup ref="popup1" type="center">
			<view class="popup1">
				<view class="tit">
					<view class="left">
						当前库存：{{productInfo.count}}
					</view>
					<view class="right" @click="pageInventory">
						<span>查看明细</span>
						<uni-icons type="right" color="#0CAD61"></uni-icons>
					</view>
				</view>
				<view class="cont">
					<view class="">
						<radio-group @change="radioChange">
							<label class="radio" :style="{color:value=='+'?'#000':'#D1D1D6'}">
								<radio checked="true" style="transform: scale(0.8)" color="#000000" value="+" />增加
							</label>
							<label class="radio" :style="{color:value=='-'?'#000':'#D1D1D6'}">
								<radio style="transform: scale(0.8)" color="#000000" value="-" />减少
							</label>
						</radio-group>
					</view>
					<view class="input">
						<!-- <input v-model="changeCount" min='1' type="number" placeholder="请输入" /> -->
						<uni-number-box min='1' max='99999' v-model="productCount" />
					</view>
				</view>
				<view class="btnflex">
					<view class="btn b1" @click="close()">
						取消
					</view>
					<view class="btn b2" @click="handleConfirmCount">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="tit">删除商品</view>
				<view class="cont">{{productName}}</view>
				<view class="btnflex">
					<view class="btn b1" @click="close()">
						取消
					</view>
					<view class="btn b2" @click="handleConfirm">
						确认
					</view>
				</view>
			</view>
		</uni-popup>

		<uv-tabbar :value="1" class="tab"></uv-tabbar>
	</view>
</template>

<script>
	import {
		getProductList,
		removeProduct,
		updateProduct,
		changeProductCount
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				isclick: true,
				params: {
					pageNum: 1,
					pageSize: 10,
				},
				nolist: false,
				productList: [],
				productName: '',
				productId: '',
				productInfo: {},
				value: '+',
				productCount: 1
			};
		},
		onShow() {
			this.params.pageNum = 1
			getProductList(this.params).then(res => {
				res.rows.forEach(item => {
					item.img = item.img.split(',')
				})
				this.productList = res.rows
				let total = Math.ceil(res.total / this.params.pageSize);
				this.nolist = total == 0
			})
		},
		onPullDownRefresh() {
			this.params.pageNum = 1
			this.productList = []
			this.getlist()
				uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.params.pageNum++
			this.getlist()
		},
		methods: {
			pageInventory() {
				uni.navigateTo({
					url: `/pages/user/inventory?id=${this.productInfo.id}`
				})
				this.close()
			},
			getlist() {
				getProductList(this.params).then(res => {
					res.rows.forEach(item => {
						item.img = item.img.split(',')
					})
					this.productList.push(...res.rows)
					let total = Math.ceil(res.total / this.params.pageSize);
					this.nolist = total == 0

				})
			},
			removeShop(item) {
				this.productName = item.productName
				this.productId = item.id
				this.$refs.popup.open()
			},
			handleConfirm() {
				removeProduct({
					id: this.productId
				}).then(res => {
					if (res.code == 200) {
						this.productList = []
						this.params.pageNum = 1
						this.getlist()
						this.close()
					}
				})
			},
			close() {
				this.$refs.popup.close()
				this.$refs.popup1.close()
			},

			openKucun(item) {
				this.productInfo = item
				this.productCount = 1
				this.$refs.popup1.open()
			},
			radioChange(e) {
				this.value = e.detail.value
			},
			handleConfirmCount() {
				// console.log('1111',this.value,this.productInfo.id,this.productInfo.count);
				let obj = {
					productId: this.productInfo.id,
					changeCategoryType: this.value,
					changeCount: this.productCount
				}
				changeProductCount(obj).then(res => {
					if (res.code == 200) {
						this.$refs.popup1.close()
						if (this.value == '+') {
							this.productInfo.count += this.productCount
						} else {
							this.productInfo.count -= this.productCount
						}
					}
				})

			},
			pageShopadd() {
				uni.navigateTo({
					url: `/pages/shop/setshop`
				})
			},
			pageShop(item) {
				uni.navigateTo({
					url: `/pages/shop/setshop?shopid=${item.id}`
				})
			},
			switchchange(e, item) {
				console.log(e);
				let status = ''
				if (e.detail.value) {
					status = 'UP'
				} else {
					status = 'DOWN'
				}
				updateProduct({
					id: item.id,
					status
				}).then(res => {
					if (res.code == 200) {
						item.status = status
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FBFBFB;
	}

	.kong {
		margin: 200rpx auto;
		text-align: center;

		.ts {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #D1D1D6;
			margin-top: 30rpx;
		}

		image {
			width: 278rpx;
			height: 265rpx;
		}
	}

	.icon_fixed {
		position: fixed;
		right: 30rpx;
		bottom: 200rpx;
		z-index: 9;
	}

	.ulist {
		padding: 20rpx;
		box-sizing: border-box;

		.item {
			width: 710rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 20rpx 20rpx 0rpx 20rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			.item_t {
				display: flex;
				border-bottom: 1px solid #eee;
				padding-bottom: 30rpx;

				.imgs {
					width: 120rpx;
					height: 120rpx;
					border-radius: 12rpx;
					position: relative;

					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
					}

					.abs {
						position: absolute;
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
						top: 0%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						background: rgba(0, 0, 0, 0.5);

						image {
							width: 44rpx;
							height: 44rpx;
						}

						.ts {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 30rpx;
							color: #FFFFFF;
						}
					}
				}

				.item_r {
					flex: 1;
					margin-left: 16rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.item_r_1 {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.t1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #000000;
						}

						.t2 {
							display: flex;
							align-items: center;
							height: 46rpx;
							background: #FFFFFF;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							border: 1rpx solid #D1D1D6;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #000000;
							padding: 0rpx 16rpx;
							line-height: 46rpx;

							span {
								font-family: 'DINB';
								font-weight: bold;
								font-size: 32rpx;
								color: #CE7034;
								line-height: 46rpx;
							}
						}
					}

					.time {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #BCBCBC;
						line-height: 30rpx;
					}

					.price {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #000000;

						.s1 {
							font-family: 'DINB';
							font-weight: bold;
							font-size: 32rpx;
							color: #CE7034;

							text {
								font-size: 24rpx;
							}
						}

						.s2 {
							font-family: 'FINE';
							font-weight: 400;
							font-size: 24rpx;
							color: #D1CDCD;
							text-decoration-line: line-through;
							margin-left: 10rpx;
						}
					}
				}
			}

			.item_b {
				display: flex;
				justify-content: space-between;
				height: 80rpx;
				align-items: center;

				span {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
				}

				image {
					width: 48rpx;
					height: 48rpx;
					margin-left: 40rpx;
				}
			}
		}
	}

	.popup {
		width: 630rpx;
		height: 330rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 42rpx 54rpx;
		box-sizing: border-box;
		// margin: 300rpx auto;

		.tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #000000;
			text-align: center;
		}

		.cont {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			text-align: center;
			margin: 28rpx auto 32rpx;
		}

		.btnflex {
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;

			.btn {
				width: 240rpx;
				height: 92rpx;
				text-align: center;
				line-height: 92rpx;
			}

			.b1 {
				border: 1px solid #D9D9D9;
				color: #D9D9D9;
			}

			.b2 {
				background: #000000;
				color: #FFFFFF;
			}
		}
	}

	.popup1 {
		width: 630rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 52rpx 54rpx 40rpx;
		box-sizing: border-box;

		.tit {
			display: flex;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			justify-content: space-between;
			align-items: center;

			.right {
				span {
					text-decoration-line: underline;
					color: #0CAD61;
				}
			}
		}

		.cont {
			margin: 52rpx auto 60rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.radio {
				margin-right: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000;
			}

			.input {
				flex: 1;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				padding-left: 20rpx;
				line-height: 72rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #000;

				input {
					line-height: 72rpx;
					height: 72rpx;
				}
			}
		}

		.btnflex {
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;

			.btn {
				width: 240rpx;
				height: 92rpx;
				text-align: center;
				line-height: 92rpx;
			}

			.b1 {
				border: 1px solid #D9D9D9;
				color: #D9D9D9;
			}

			.b2 {
				background: #000000;
				color: #FFFFFF;
			}
		}
	}
</style>